<template>
    <div class="elecAnalysis">
        <div class="aTable">
            <div class="aTableHeader">
                <label>{{ deviceInfo.eq_name }}</label>
                <span>
                    <!-- 返回-1说明终端通迅异常网关正常 返回 ""或null 网关和终端通迅异常 -->
                    <img src="@/assets/images/monitor/info.png" v-if="deviceStatus" />
                    <el-tooltip :content="deviceStatus == -1 ? '终端通迅异常网关正常' : '网关和终端通迅异常'" v-else placement="left">
                        <img src="@/assets/images/monitor/info4.png" />
                    </el-tooltip>
                    <el-tooltip :content="fhz == '0' ? '分闸' : '合闸'" placement="left">
                        <img :src="getOpenImg()" style="cursor: pointer; margin-top: 4px; float: right" @click="fzhClick" />
                    </el-tooltip>
                </span>
            </div>
            <div class="aTableMain">
                <div class="aTableItem">
                    <label>{{ value1 }}</label>
                    <label>{{ value2 }}</label>
                    <label>{{ value3 }}</label>
                    <label>{{ value4 }}</label>
                    <label>{{ value5 }}</label>
                    <label>{{ value6 }}</label>
                    <label>{{ value7 }}</label>
                    <span></span>
                    <label>{{ value01 }}</label>
                    <label>{{ value02 }}</label>
                    <font>kWh</font>
                </div>
                <div class="aTableContent">
                    <div class="aTableContentHalf">
                        <label>电压：</label>
                        <span>0.00 V</span>
                    </div>
                    <div class="aTableContentHalf">
                        <label>功率因素：</label>
                        <span></span>
                    </div>
                    <div class="aTableContentHalf">
                        <label>电流：</label>
                        <span>0.00 A</span>
                    </div>
                    <div class="aTableContentHalf">
                        <label>有功功率：</label>
                        <span>0.00 kW</span>
                    </div>
                </div>
            </div>
            <div class="aTableTip">
                <span>
                    <img src="@/assets/images/monitor/grayTip.png" style="width: 14px" />
                    <label>欠费</label>
                </span>
                <span>
                    <img src="@/assets/images/monitor/grayTip.png" style="width: 14px" />
                    <label>负载跳电</label>
                </span>
                <span>
                    <img src="@/assets/images/monitor/grayTip.png" style="width: 14px" />
                    <label>恶性负载跳电</label>
                </span>
            </div>
        </div>
    </div>
</template>

<script>
import {AjaxCommon} from '@/libs/apiCommon'
import {PopupCommon} from '@/libs/popupCommon'
export default {
    name: 'elecAnalysis',
    components: {},
    props: ['deviceInfo'],
    watch: {
        deviceInfo: {
            handler(di) {
                if (di) {
                    this.getData()
                }
            },
            deep: true,
            immediate: false
        }
    },
    data() {
        return {
            /** 分合闸，默认分  是否分合闸（0合闸 1分闸） */
            fhz: 0,
            deviceItem: {
                /** 当前采集量 */
                CURRENT_VALUE: '',
                /** 表地址 */
                EQ_ADDRESS: '',
                /** 分项类型（按国家能源导则对水电分项，如：照明用电、空调用电等分类） */
                USE_TYPE: '',
                /** 是否分合闸（0合闸 1分闸） */
                SWITCH_STATE: '',
                /** 数据状态（0正常）  */
                STATUS: '',
                /** 倍率 */
                RATE: '',
                /** 设备类型（01电表 02水表 03 气表等） */
                EQ_TYPE: '',
                /** 设备名称 */
                EQ_NAME: '',
                /** 采集周期 */
                STAT_CYCLE: '',
                /** 安装地址 */
                INSTALL_ADDRESS: '',
                /** 倍率是否写入表计（0：未写入 1：写入） */
                RATE_WRITE_TAG: '',
                /** 协议类型（取列表数值） */
                protocol_type: '',
                DZ: '',
                ORGID: ''
            },
            value7: '',
            value6: '',
            value5: '',
            value4: '',
            value3: '',
            value2: '',
            value1: '',
            value02: '',
            value01: '',
            deviceStatus: ''
        }
    },
    computed: {},
    created() {
        this.getData()
    },
    methods: {
        fzhClick() {
            const eq_guid = this.deviceInfo.eq_guid

            const self = this
            this.$prompt('请输入密码', `提示：${this.fhz == '0' ? '分闸' : '合闸'}前请输入密码`, {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputType: 'password',
                inputPattern: /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#+$%^&*]).+$/,
                inputErrorMessage: '密码需包含数字、字母及至少一个特殊字符(!@#+$%^&*)'
            })
                .then(({value}) => {
                    AjaxCommon(`/api/Eq/PdPassword?Password=${value}`, 'post', {}).then(async (res) => {
                        console.log(res)
                        if (res.data.Message == 'ok') {
                            // 设备合闸操作，后台加HIS记录 操作成功返回1，返回2合闸操作成功,设备状态未更新。 返回其它操作失败 如 返回-1说明终端通迅异常网关正常 返回 ""或null 网关和终端通迅异
                            // 分合闸（0合闸 1分闸）
                            let result = null
                            if (self.fhz == '0') {
                                // 去分闸
                                result = await AjaxCommon(`/api/Eq/GetEqRtClose?eqid=${eq_guid}`, 'post', {})
                            } else {
                                // 去合闸
                                result = await AjaxCommon(`/api/Eq/GetEqRtOpen?eqid=${eq_guid}`, 'post', {})
                            }
                            if (result?.data?.Message == 1) {
                                PopupCommon.notify('success', '操作成功')
                                self.getData()
                                return
                            }
                            if (result?.data?.Message == 2) {
                                PopupCommon.notify('success', '操作成功，设备状态未更新')
                                self.getData()
                                return
                            }
                            PopupCommon.notify('error', '操作失败')
                        } else {
                            PopupCommon.notify('error', res.data.Message)
                        }
                    })
                })
                .catch(() => {
                    console.log('取消输入')
                })
        },
        getOpenImg() {
            /** 是否分合闸（0合闸 1分闸） 合闸绿色 分闸红色*/
            if (this.fhz == '0') {
                return require('@/assets/images/monitor/open.png')
            } else {
                return require('@/assets/images/monitor/close.png')
            }
        },
        getValue(str) {
            if (str) {
            } else {
                str = '0.00'
            }
            const value = parseFloat(str)?.toFixed(2)
            const xsd = value?.split('.')?.[1]?.split('') ?? ['0', '0']
            this.value02 = xsd?.[1] ?? '0'
            this.value01 = xsd?.[0] ?? '0'
            const sp = value?.split('.')?.[0]?.split('')
            if (sp.length == 1) {
                this.value7 = sp?.[0]
            }
            if (sp.length == 2) {
                this.value7 = sp?.[1]
                this.value6 = sp?.[0]
            }
            if (sp.length == 3) {
                this.value7 = sp?.[2]
                this.value6 = sp?.[1]
                this.value5 = sp?.[0]
            }
            if (sp.length == 4) {
                this.value7 = sp?.[3]
                this.value6 = sp?.[2]
                this.value5 = sp?.[1]
                this.value4 = sp?.[0]
            }
            if (sp.length == 5) {
                this.value7 = sp?.[4]
                this.value6 = sp?.[3]
                this.value5 = sp?.[2]
                this.value4 = sp?.[1]
                this.value3 = sp?.[0]
            }
            if (sp.length == 6) {
                this.value7 = sp?.[5]
                this.value6 = sp?.[4]
                this.value5 = sp?.[3]
                this.value4 = sp?.[2]
                this.value3 = sp?.[1]
                this.value2 = sp?.[0]
            }
            if (sp.length == 7) {
                this.value7 = sp?.[6]
                this.value6 = sp?.[5]
                this.value5 = sp?.[4]
                this.value4 = sp?.[3]
                this.value3 = sp?.[2]
                this.value2 = sp?.[1]
                this.value1 = sp?.[0]
            }
        },
        async getDeviceStatus(params) {
            return await AjaxCommon(params, 'post', {})
        },
        async getData() {
            // const deviceInfo = this.deviceInfo
            // const params = `/api/Eq/GetEQRTInfo?eq_guid=${deviceInfo.eq_guid}`
            // AjaxCommon(params, 'get', null).then((res) => {
            //     console.log(res)

            //     const data = res.data.Message[0]
            //     this.deviceItem = data
            // })
            // 获取设备基本信息
            const deviceInfo = this.deviceInfo
            let params = `/api/Eq/GetEQRTInfo?eq_guid=${deviceInfo.eq_guid}`
            const res = await AjaxCommon(params, 'get', null)
            const data = res?.data?.Message?.[0]
            console.log(data, '设备详情...................')
            this.deviceItem = data ?? {}
            this.fhz = data?.SWITCH_STATE
            this.getValue(this.deviceItem?.CURRENT_VALUE ? this.deviceItem?.CURRENT_VALUE : '0.00')
            // 进入页面先加载数据库中已有数据，再通过调用GetEqRtData（可页面设置定时器调用3次，返回数据即更新用量，无返回变更信号状态为灰色，用量为GetEQRTInfo接口数据）获取实时数据
            params = `/api/Eq/GetEqRtData?eqid=${deviceInfo.eq_guid}`
            /** 	设备实时用量 返回string 字符 实时电量或水量等数据，多个参数用|分隔 如 返回-1说明终端通迅异常网关正常 返回 ""或null 网关和终端通迅异常 */
            let actData = await this.getDeviceStatus(params)
            let value = ''
            value = actData.data?.Message
            if (value && value != '-1') {
                this.deviceStatus = value
                this.getValue(value?.split('|')?.[0] ?? '')
                return
            }
            setTimeout(async () => {
                actData = await this.getDeviceStatus(params)
                value = actData.data?.Message
                this.deviceStatus = value
                if (value && value != '-1') {
                    this.deviceStatus = value
                    this.getValue(value?.split('|')?.[0] ?? '')
                    return
                }
                setTimeout(async () => {
                    actData = await this.getDeviceStatus(params)
                    value = actData.data?.Message
                    this.deviceStatus = value
                    if (actData.data?.Message == '' || actData.data?.Message == null) {
                        PopupCommon.notify('info', '网关和终端通迅异常')
                        return
                    }
                    if (actData.data?.Message == -1) {
                        PopupCommon.notify('info', '终端通迅异常网关正常')
                        return
                    }
                    if (value && value != '-1') {
                        this.getValue(value?.split('|')?.[0] ?? '')
                    }
                }, 5000)
            }, 5000)
        }
    }
}
</script>

<style lang="scss" scoped>
.elecAnalysis .aTable {
    width: 360px;
    background-color: #e6edfd;
    padding: 10px 20px;
    border-radius: 4px;
    margin-top: 40px;
}
.mb10 {
    margin-bottom: 10px;
    font-size: 16px;
}

.elecAnalysis .aTable .aTableHeader {
    font-size: 12px;
    height: 35px;
    line-height: 35px;
    display: flex;
}
.elecAnalysis .aTable .aTableHeader label {
    font-size: 14px;
    // font-weight: bold;
}
.elecAnalysis .aTable .aTableHeader span {
    font-size: 12px;
    text-align: right;
    flex: 1;
}
.elecAnalysis .aTable .aTableHeader span img {
    margin-left: 10px;
}

.elecAnalysis .aTable .aTableMain {
    font-size: 14px;
    // background-color: #82aae0;
    background-color: #5484f3;
    border-radius: 4px;
    padding: 20px;
    height: 130px;
    margin-top: 10px;
}
.elecAnalysis .aTable .aTableMain .aTableItem {
    font-size: 20px;
    height: 35px;
    width: 100%;
}
.elecAnalysis .aTable .aTableMain .aTableItem label {
    font-size: 28px;
    background-color: #fff;
    height: 25px;
    display: block;
    float: left;
    width: 20px;
    margin-right: 5px;
    line-height: 28px;
    text-align: center;
    font-weight: bold;
    border-radius: 2px;
    font-family: 'led';
}
.elecAnalysis .aTable .aTableMain .aTableItem span {
    background-color: #333;
    height: 5px;
    display: block;
    float: left;
    width: 5px;
    margin-right: 5px;
    border-radius: 5px;
    margin-top: 15px;
}
.elecAnalysis .aTable .aTableMain .aTableItem font {
    font-size: 14px;
    color: #fff;
    margin-top: 10px;
    display: block;
    float: left;
    margin-left: 5px;
}

.elecAnalysis .aTable .aTableMain .aTableContent {
    font-size: 12px;
    height: 60px;
}
.elecAnalysis .aTable .aTableMain .aTableContent .aTableContentHalf {
    width: 50%;
    float: left;
    height: 30px;
    line-height: 30px;
    color: #fff;
}
.elecAnalysis .aTable .aTableMain .aTableContent .aTableContentHalf label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.elecAnalysis .aTable .aTableMain .aTableContent .aTableContentHalf span {
    font-size: 14px;
}

.elecAnalysis .aTable .aTableTip {
    margin-top: 25px;
}

.elecAnalysis .aTable .aTableTip span {
    font-size: 12px;
    height: 14px;
    line-height: 14px;
    display: inline-block;
    margin-right: 10px;
}

.elecAnalysis .aTable .aTableTip span img {
    float: left;
    margin-right: 5px;
}
.elecAnalysis .aTable .aTableTip span label {
    font-size: 12px;
}
</style>